<template>
	<view class="container">
		<view class="tui-order-item">
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					订单商品欠货信息
				</view>
			</tui-list-cell>
			<tui-list-cell padding="0" v-if="goods_list!=null" v-for="(goods,idx) in goods_list">
				<view class="tui-goods-item">
					<image :src="goods.thumb" class="tui-goods-img"></image>
					<view class="tui-goods-center">
						<view class="tui-goods-name">{{ goods.goods_name}}</view>
						<!-- <view class="tui-goods-attr">黑色，50ml</view> -->
					</view>
					<view class="tui-price-right">
						<view>￥{{goods.price}}</view>
						<view>x{{goods.num}}</view>
					</view>
				</view>
				<view class="tui-goods-info">
					<view class="tui-price-flex">
						<view>已发数量</view>
						<view>{{goods.send_num}}</view>
						<view>欠货数量</view>
						<view>{{goods.num - goods.send_num}}</view>
					</view>
				</view>
			</tui-list-cell>
			
		</view>
		<view class="tui-safe-area"></view>
	</view>
</template>

<script>
	export default {
		onLoad(opt) {
			this.osn = opt.osn;
		},
		onShow() {
			this.tui.chkAuth();
			this.getInfo();
		},
		data() {
			return {
				//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
				status: 1,
				show: false,
				goods_list:null,
				order_id:0,
				osn:''
			}
		},
		methods: {
			getInfo:function(){
				this.tui.get('user/order/goods',{osn:this.osn}).then(res=>{
					this.goods_list = res.data
				});
			},
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}
	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}



	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}
	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.tui-list-cell{margin-bottom: 15px;}

</style>
